/*
    css中引用图片
*/

const path = require('path');
const uglify = require('uglifyjs-webpack-plugin'); // 代码压缩，不需安装就可使用

module.exports = {
    entry: { // 入口配置项
        entry: './src/entry01.js' // 多入口文件1，file1可以任意写
    },
    output: { // 出口配置项
        path: path.resolve(__dirname, 'dist'), // 绝对路径
    },
    module: { // 打包css、图片转换、压缩，把sass转换为css、es6转换为浏览器兼容的代码、react的语法转换成js代码
        // module里都是loader，npm install完毕后不需通过require('')引入，而插件需要引入成一个对象，而后在plugins选项里使用
        rules: [
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
                
            },
            {
                test: /\.(png|jpg|gif)/,
                use:[
                    { // url-loader可改变所有图片的路径，不仅仅是css中的图片（这节课学到的是css里的图片路径），index.html中的img标签的路径也可以
                        // 处理index.html中的img需要安装html-withimg-loader配合使用，见lesson10
                        loader: 'url-loader', // url-loader解决图片打包后的url或base64，使css中的url可以正常渲染。url-loader自带对file-loader的依赖，但是file-loader还是需要安装的
                        options: {
                            limit: 10000000000, // 单位字节（b），大于等于这个数值的话拷贝这个图片到dist/下，生成url，小于的话在js里生成base64
                            outputPath: 'imgs/' // 如果不配置outputPath图片默认打包到dist/，配置可以打包到dist/下的指定目录里，
                            // 如何写outputPath的属性值呢，首先把dist目录视为参照目录，并且当前在dist/下的不存在的目录里，根据这个位置确定后面的路径（写成 imgs/），不知道这么说明白了吗
                            // 这样资源查看时，background:的url就是background: url(imgs/e7698f695dcb0ed98d062b4b87549c7b.png);
                            // 也可写成outputPath:'./imgs/'，查看资源时，background:的url就是background: url(./imgs/e7698f695dcb0ed98d062b4b87549c7b.png);
                            // 但不能写成outputPath:'/imgs/'，查看资源时，background:的url就是background: url(/imgs/e7698f695dcb0ed98d062b4b87549c7b.png);，404了
                            // 最后要加上 / ，如果写成outputPath: 'img'打包后的变成imgs拼接上图片的md5，如img5678dfsds.png
                        }
                    }
                ]
            }
        ]
    },
    plugins: [ // 插件
        new htmlPlugin({ // 注1
            minify: { // 压缩
                removeAttributeQuotes: true // 删除index.html打包后的单引号和双引号
            },
            hash: true, // 打包后的index.html中的资源引用加上hash防止缓存，就是防止改完js文件运行后不起效果
        }),
    ],
    devServer: { // 开发服务(开发环境)
        contentBase: path.resolve(__dirname, 'dist'), // 热更新，监听资源绝对路径
        host: '192.168.31.163', // 服务器地址
        compress: true, // 启用服务器压缩
        port: 1717 // 端口，可以任意取
    }
}

/*
    笔记：
        css中有路径，譬如：background-image: url(../images/spring.png);，在webpack打包时会报错，需要执行npm install --save-dev file-loader url-loader 
        安装两个loader.

        如果图片大于options选项里的limit设定值，图片使用url打包，index.css文件里background-image的url是 ../images/spring.png，
        打包后的背景图片地址要改成./dfsfafaafasf.png,file-loader就是起转换图片地址作用的；

        采用url打包图片，打包出口在dist目录下

    注1：
        htmlPlugin插件打包index.html，能自动引用dist/下的脚本文件
*/